<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>系统角色列表</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="/resources/favicon.ico">
	<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/resources/css/public.css" media="all" />
	<link rel="stylesheet" href="/resources/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="/resources/layui_ext/dtree/font/dtreefont.css">
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote quoteBox">
		<form class="layui-form" method="post" id="searchForm">
			<div class="layui-form-item" style="text-align: center;">
			    <div class="layui-inline">
			      <label class="layui-form-label">角色名称:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="name"  placeholder="请输入角色名称" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">角色备注:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="remark"  placeholder="请输入角色备注" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <button type="button" class="layui-btn" id="doSearch"><span class='layui-icon'>&#xe615;</span>搜索</button>
		          <button type="reset" class="layui-btn layui-btn-danger"><span class='layui-icon'>&#xe669;</span>重置</button>
			    </div>
		   </div>
		</form>
	</blockquote>
	
	<table id="roleTable" class="layui-table" lay-filter="roleTable"></table>
	
	<!--表头-->
	<div id="roleTableToolBar" style="display: none;">
		<a class="layui-btn layui-btn-sm" lay-event="add"><span class="layui-icon">&#xe61f;</span>添加</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="batchdel"><span class="layui-icon">&#xe640;</span>批量删除</a>
	</div>
	<!--操作-->
	<div type="text/html" id="roleTableRowBar"  style="display: none;">
		<a class="layui-btn layui-btn-xs" lay-event="update"><span class="layui-icon">&#xe642;</span>编辑</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><span class="layui-icon">&#xe640;</span>删除</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="selectRolePermission"><span class="layui-icon">&#xe60b;</span>分配权限</a>
	</div>
	
	<!-- 修改和添加弹出层开始 -->
	<div style="display: none;padding: 3px" id="saveOrUpdateDiv">
		<form id="dataForm" lay-filter="dataForm" class="layui-form layui-form-pane">
			<div class="layui-form-item">
				<label class="layui-form-label">角色名称:</label>
				<div class="layui-input-block">
					<input type="hidden" name="id">
					<input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">角色备注:</label>
				<div class="layui-input-block">
					<textarea class="layui-textarea" name="remark"></textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">是否可用:</label>
					<div class="layui-input-inline">
						<input type="radio" name="available" value="1" title="可用" checked="">
						<input type="radio" name="available" value="0" title="不可用" >
					</div>
				</div>
			</div>	
			<div class="layui-form-item" style="text-align: center;">
				<button type="button" class="layui-btn" lay-filter="doSubmit" lay-submit=""><span class='layui-icon'>&#xe609;</span>提交</button>
				<button type="reset" class="layui-btn layui-btn-danger" ><span class='layui-icon'>&#xe669;</span>重置</button>
			</div>
		</form>
	</div>
	<!-- 修改和添加弹出层结束 -->
	
	<!-- 分配权限的树 -->
	<div id="selectRolePermissionDiv" style="display: none;">
		<ul id="permissionTree" class="dtree" data-id="0"></ul>
	</div>
	
	<script type="text/javascript" src="/resources/layui/layui.js"></script>
	<script type="text/javascript">
	var tableIns;
	var $;
	layui.extend({
	    dtree: '/resources/layui_ext/dtree/dtree' 
	  }).use(['layer','jquery','table','form','dtree'],function(){
		  var layer = layui.layer;
		  $ = layui.jquery;
		  var table = layui.table;
		  var form = layui.form;
		  var dtree=layui.dtree;
		  
		  //数据加载
		  //渲染数据表格

		//渲染数据表格
			tableIns = table.render({
				elem:'#roleTable',
				url:'/role/loadAllRole',
				toolbar:'#roleTableToolBar',//开启同工具栏
				defaultToolbar:['filter','print'],
				title: '权限数据表',
				height:'full-150',//固定高度
				cols:[ [
					{type: 'checkbox', fixed: 'left'},
					{field:'id',title:'ID',align:'center',fixed: 'left',width:'80'},
					{field:'name',title:'角色名称',align:'center',width:'150'},
					{field:'remark',title:'角色备注',align:'center',width:'150'},
					{field:'available',title:'是否可用',align:'center',width:'150',templet: function(d){
						 return d.available==1?'<font color=blue>可用</font>':'<font color=red>不可用</font>';
					}},
					{field:'createtime',title:'创建时间',align:'center',width:'250'},
					{field:'right',title:'操作',toolbar:'#roleTableRowBar',align:'center',width:'250'}
				] ],
				page:true
			});
		    //模糊查询
		    $("#doSearch").click(function(){
		    	var params = $("#searchForm").serialize();
		    	tableIns.reload({
		    		url:'/role/loadAllRole?'+params,
		    	})
		    });
		    
		    //监听表头点击事件
		    table.on('toolbar(roleTable)',function(obj){
		    	switch(obj.event){
		    		case 'add':
		    			 openAddLayer();
		    			break;
		    		case 'batchdel':
		    			batchDelete(obj);
		    			break;
		    	}
		    });
		    
		    var mainIndex;
		    var url;
		    //打开添加的弹出层
		    function openAddLayer(){
		    	mainIndex=layer.open({
		    		type:1,
		    		title:'添加角色',
		    		skin: 'layui-layer-molv', //加上边框
					area: ['800px', '600px'], //宽高
					content:$("#saveOrUpdateDiv"),
					success:function(index){
						url="/role/addRole";
						$("#dataForm")[0].reset();
					}

		    	});
		    }
		    
		    //批量删除
		    function batchDelete(obj){
		    	//获取要删除的行
		    	var checkStatus = table.checkStatus('roleTable');
		   		if(checkStatus.data.length==0){
		   			layer.msg("请选择要删除的数据");
		   		}else{
		   			layer.confirm('真的删除选中的所有角色么?',function(index){
		   				layer.close(index);
		   				var params="";
		   				$.each(checkStatus.data,function(i,item){
		   					if(i==0){
		   						params+="ids="+item.id;
		   					}else{
		   						params+="&ids="+item.id;
		   					}
		   				});
		   				//向服务器发送删除指令
		   				$.post("/role/batchDeleteRole",params,function(obj){
		   					if(obj.code==200){
		   						tableIns.reload();//重载表格
		   					}
		   					layer.close(obj.msg);
		   				});
		   			});
		   		}
		    }
		    
		    //监听行点击事件
		    table.on('tool(roleTable)',function(obj){
		    	var data = obj.data;//获取当前行数据
		    	var layEvent = obj.event;//获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		    	if(layEvent === 'update'){//修改
		    		openUpdateLayer(data);
		    	}else if(layEvent === 'del'){//删除
		    		deleteDept(data);
		    	}else if(layEvent === 'selectRolePermission'){
		    		openSelectRolePermissionLayer(data);
		    	}
		    	
		    })
		    //打开分配权限的弹出层
		    function openSelectRolePermissionLayer(data){
		    	var permissionTree;
		    	mainIndex = layer.open({
		    		type:1,
		    		title:'分配【'+data.name+'】角色的权限',
		    		skin:'layui-layer-molv',//加上边框
		    		area:['400px','600px'],//宽高
		    		content:$("#selectRolePermissionDiv"),
		    		btn:['确认分配','关闭窗口'],
		    		yes:function(index,layero){
		    			//得到当产有树选中值
		    			var paramNodes = dtree.getCheckbarNodesParam("permissionTree");
		    			var params = "roleId="+data.id;
		    			$.each(paramNodes,function(i,item){
		    				//console.log(item);  查询选中的参数
		    				params+="&pids="+item.nodeId;
		    			});
		    			$.post("/role/saveRolePermission",params,function(rs){
		    				layer.msg(rs.msg);
		    				layer.close(mainIndex);
		    			});
		    		},
		    		btnAlign:'c',
		    		success:function(index){
		    			permissionTree=dtree.render({
		    				elem:"#permissionTree",
		    				url:"/role/loadRolePermission?id="+data.id,
		    				dataStyle:"layuiStyle",//使用layui风格的样式
		    				dataFormat:"list",//配置data风格为list
		    				response:{message:"msg",statusCode:0},//修改response中返回数据的定义
		    				checkbar:true //开启复选框
		    			});
		    		}
		    	});
		    }
		    
		    //删除
		    function deleteDept(data){
    			layer.confirm('真的删除【'+data.name+'】么',function(index){
	    			layer.close(index);
	    			//向服务器发送删除指令
	    			$.post("/role/deleteRole",{id:data.id},function(obj){
	    				if(obj.code == 200){
	    					tableIns.reload();//重新加载表单
	    				}
	    				layer.msg(obj.msg);
	    			});
	    		});
		    }
		    
		    //打开修改的弹出层
		    function openUpdateLayer(data){
		    	mainIndex=layer.open({
		    		type:1,
		    		title:'修改角色',
		    		skin: 'layui-layer-molv', //加上边框
					area: ['800px', '600px'], //宽高
					content:$("#saveOrUpdateDiv"),
					success:function(index){
						url="/role/updateRole";
						$("#dataForm")[0].reset();
						form.val("dataForm",data);
					}
		    	});
		    }
		    
		    //监听提交按钮的事件  添加和修改完成后刷新左边的树
		    form.on("submit(doSubmit)",function(data){
		    	var params = $("#dataForm").serialize();
		    	//提交 数据
		    	$.post(url,params,function(obj){
		    		if(obj.code==200){
		    			tableIns.reload();//重新加载表单
		    		}
		    		layer.msg(obj.msg);
					layer.close(mainIndex);
		    	})
		    	return false;//阻止同步提交
		    });
		    
		   
		    
	  });
	
	
	</script>
	
	
	
	
</body>
</html>